<template>
<div class="rightItem">
  <div class="title">
    操作面板
  </div>
  <div class="panel" v-if="sonData.is_self==1 && sonData.recStatus == 1 && sonData.is_del == 0">
    <div class="panelBox">
      <div class="item">
        <el-upload
          class="upload-demo"
          action="http://inter.huanxingbi.cn/?s=Learn.Admin.Update_file"
          :on-success="handleSuccess"
          :headers="headers"
          :data="dataForm"
          :on-remove="remove"
          :file-list="fileList">
          <div style="display:block;">
            <img src="@/assets/img/uploadIcon.png" >
            <p>上传文件</p>
          </div>
        </el-upload>
      </div>
      <div class="item fix" >
          <img src="@/assets/img/queryIcon.png" @click="queryClick" >
          <p @click="queryClick">疑问求助</p>
      </div>
      <div class="item fix"  v-if="sonData.recStatus!= 2">
        <img src="@/assets/img/submitIcon.png" @click="submitClick">
        <p @click="submitClick">提交任务</p>
      </div>
      <div class="item fix"  >
        <img src="@/assets/img/abandonIcon.png" @click="abandonClick">
        <p  @click="abandonClick">放弃任务</p>
      </div>
    </div>
  </div>
  <div v-else class="wj">
    <span v-if="sonData.is_del == 3" style="color:red;">任务已结束</span>
    <span v-else>
      <span v-if="sonData.recStatus === 0">未接任务不能操作</span>
      <span v-if="sonData.recStatus === 3">已完成</span>
      <span v-if="sonData.recStatus === 2">审核中</span>
    </span>
  </div>
</div>
</template>
<script>

  export default {
    name: 'operationPanel',
    components: {},
    props: {
      sonData: {
        type: Object
      },
      dataForm: {
        type: Object
      },
      headers: {
        type: Object
      }
    },
    emits: ["queryClick"],
    setup(props,context){
      const queryClick = () => {
          context.emit("queryclick")
      }
      const submitClick = () => {
          context.emit("submitclick")
      }
      const abandonClick = () => {
          context.emit("abandonclick")
      }
      const remove = () => {
        context.emit("remove")
      }
      const handleSuccess = (res) => {
        context.emit("handlesuccess",res)
      }
      return {
        queryClick,
        submitClick,
        abandonClick,
        remove,
        handleSuccess
      }
    }
  }
</script>
<style lang="scss" scoped>
  .rightItem {
    background-color: #fff;
    flex: 3;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
  // align-items: center;
  &:nth-child(3){
     flex: 2.5;
     margin-bottom: 0px;
   }

  &:nth-child(1) .panel{
     display: flex;
     justify-content: center;
     align-items: center;
     height: calc(100% - 55px);
  .panelBox{
    display: flex;
    flex-wrap: wrap;
    width: 60%;
  .fix {
    flex: 33% !important;
  }
  .item{
    flex: 100%;
    display: grid;
    place-items: center;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 20px;
  img{
    width: 26px;
    height: 26px;
  }
  p{
    color: #00000073;
    font-size: 14px;
  }
  }
  }

  }

  &:nth-child(2) .panel,&:nth-child(3) .panel{
                           margin: 10px;
  .item {
    display: flex;
    align-items: center;
    font-size: 14px;
  .img {
    width: 30px;
    height: 24px;
    border-radius: 50%;
  img{
    width: 100%;
    height: 100%;
  }
  }

  p {
    margin-left: 20px;
    flex: 1;
    color: #444444FF;
  }

  span {
    color: #888888FF;
    margin-right: 20px;
  }
  }
  }


  .title {
    border-bottom: 1px solid #E9E9E9;
    padding-left: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    height: 55px !important;
  }

  }
  .left-item {
    display: flex;
    padding-bottom: 15px;
    padding-top: 10px;
    border-bottom: 1px solid #efeeee;
  }
  .ma-left {
    margin-left: 15px;
  }
  .download {
    border: 1px solid;
    padding: 5px;
    border-radius: 5px;
    background: #409eff;
    color: white !important;
    margin-right: 1px !important;
    cursor:pointer;
    height: 18px;

  }
  .download:active {
    color: red !important;
  }
  .wj {
    padding:20px;
    font-size: 12px;
  }
  .img {

  }
  .d-time {
    color: #888888FF;
    padding-top: 5px;
  }
  .color {
    color: #444444;
    width: 100px;
  }
  .titles {
    width: 400px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .rigth {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
  }
  .d-fix {
    display: flex;
  }
  .img img {
    width: 55px !important;
    height:55px !important;
  }
</style>
